<!DOCTYPE html>
<html>

<head>
    <!-- 基本元数据 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Course Management</title>
    
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/style.css">
    
    <!-- 内部样式 -->
    <style>
        /* 表格样式 */
        table {
            width: 70%;
            border-collapse: collapse;
            margin: 0 auto;
        }

        /* 单元格样式 */
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        /* 表头样式 */
        th {
            background-color: #f2f2f2;
        }

        /* 操作图标样式 */
        .action-icons i {
            cursor: pointer;
        }

        /* 合并单元格样式 */
        .merge {
            vertical-align: top;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="header">
    </nav>
    
    <!-- 主内容区域 -->
    <div class="container mt-5">
        <h1>我的课表</h1>
        <table>
            <tr>
                <th></th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>
            </tr>
            <tr>
                <th>第一节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第二节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第三节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第四节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第五节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th colspan="8">午休</td>
            </tr>
            <tr>
                <th>第六节</th>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="4" class="merge">Web程序设计</td>
                <td rowspan="4" class="merge">Web程序设计</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第七节</th>
                <td></td>
                <td></td>
                <td rowspan="3" class="merge">课外答疑（需钉钉预约）</td>
                <td></td>
                <td></td>

            </tr>
            <tr>
                <th>第八节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
            <tr>
                <th>第九节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>

            </tr>
            <tr>
                <th colspan="8">晚饭时间</td>
            </tr>
            <tr>
                <th>第十节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第十一节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>第十二节</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    
    <!-- 页脚 -->
    <footer class="mt-auto bg-light py-3">
    </footer>
    
    <!-- 引入外部脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/course-ex.js"></script>
    
    <!-- 主脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化操作图标
            const cells = document.querySelectorAll('td');
            cells.forEach(cell => {
                if (!cell.classList.contains('merge')) {
                    if (cell.textContent.trim() === '') {
                        cell.innerHTML = `<div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>`;
                    } else {
                        cell.innerHTML = `${cell.textContent.trim()}<div class="action-icons">
                            <i class="bi bi-pencil-square edit-icon"></i>
                            <i class="bi bi-trash-fill delete-icon"></i>
                        </div>`;
                    }
                }
            });

            // 处理新增图标点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('add-icon')) {
                    const cell = e.target.closest('td');
                    if (!cell.classList.contains('merge')) {  // 检查是否是合并单元格
                        cell.innerHTML = `<input type="text" class="form-control new-course-input">`;
                        cell.querySelector('.new-course-input').focus();
                    }
                }
            });

            // 处理文本框失去焦点
            document.addEventListener('blur', function(e) {
                if (e.target.classList.contains('new-course-input')) {
                    const cell = e.target.closest('td');
                    const courseName = e.target.value.trim();
                    if (courseName) {
                        cell.innerHTML = `${courseName}<div class="action-icons">
                            <i class="bi bi-pencil-square edit-icon"></i>
                            <i class="bi bi-trash-fill delete-icon"></i>
                        </div>`;
                    } else {
                        cell.innerHTML = `<div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>`;
                    }
                }
            }, true);

            // 处理删除图标点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('delete-icon')) {
                    const cell = e.target.closest('td');
                    if (!cell.classList.contains('merge')) {  // 检查是否是合并单元格
                        cell.innerHTML = `<div class="action-icons">
                            <i class="bi bi-plus-circle add-icon"></i>
                        </div>`;
                    }
                }
            });

            // 处理编辑图标点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('edit-icon')) {
                    const cell = e.target.closest('td');
                    if (!cell.classList.contains('merge')) {  // 检查是否是合并单元格
                        const courseName = cell.textContent.trim().replace(/\s*<div.*?<\/div>\s*/, '');
                        cell.dataset.originalCourse = courseName;
                        cell.innerHTML = `<input type="text" class="form-control edit-course-input" value="${courseName}">`;
                        cell.querySelector('.edit-course-input').focus();
                    }
                }
            });

            // 处理编辑文本框失去焦点
            document.addEventListener('blur', function(e) {
                if (e.target.classList.contains('edit-course-input')) {
                    const cell = e.target.closest('td');
                    if (!cell.classList.contains('merge')) {  // 检查是否是合并单元格
                        const courseName = e.target.value.trim();
                        if (courseName) {
                            cell.innerHTML = `${courseName}<div class="action-icons">
                                <i class="bi bi-pencil-square edit-icon"></i>
                                <i class="bi bi-trash-fill delete-icon"></i>
                            </div>`;
                        } else {
                            if (confirm('是否确认输入信息为空会删除课程？')) {
                                cell.innerHTML = `<div class="action-icons">
                                    <i class="bi bi-plus-circle add-icon"></i>
                                </div>`;
                            } else {
                                const originalCourse = cell.dataset.originalCourse;
                                cell.innerHTML = `<input type="text" class="form-control edit-course-input" value="${originalCourse}">`;
                                setTimeout(() => {
                                    cell.querySelector('.edit-course-input').focus();
                                }, 0);
                            }
                        }
                    }
                }
            }, true);
        });
    </script>
</body>

</html>
